<template>
	<view>
		<view class='cell'>

			<span class='lefttext'>头像</span>
			<view class="rightimg">
				<image class="img" @click="uploadfun" :src=srcs mode="" style=""></image>
			</view>
			<u-upload class="upload" ref="upload" :deletable="false" width="250" height="150" :fileList="fileList1"
				@afterRead="afterRead" name="1" :previewImage="false" multiple :maxCount='1' :accept='accept'>
			</u-upload>
		</view>
		<view class='cell2'>
			<view class='lefttext2'>
				<span>
					昵称
				</span>
			</view>
			<view class="right2">
				<u-input :inputClassStyle="inputClassStyle" class="inp" placeholder="请输入内容" border="none"
					fontSize="36rpx" input-align="right" v-model="name"></u-input>
			</view>
		</view>
		<view class='cell2'>
			<view class='lefttext2'>
				<span>
					ID
				</span>
			</view>

			<view class="right2">
				<u-input class="inp" placeholder="请输入内容" border="none" fontSize="36rpx" input-align="right" v-model="id"
					disabled style="background-color: #FFFFFF;"></u-input>
			</view>

		</view>
		<u-button @click="editname" type="primary" text="确定" class="btn"></u-button>
	</view>
	</view>
</template>

<script>
	import {
		getinfo,
		editname
	} from '@/api/mine'
	import Rrequest from '@/util/Rrequest'
	import upload from '../../uni_modules/uview-ui/components/u-upload/u-upload.vue'
	export default {
		data() {
			return {
				inputClassStyle: {},
				fileList1: [],
				srcs: '',
				name: '',
				id: '',
				mine: [],
				yuan: '',
				urls: 'user/customer/avatar',
				token: '',
				accept: 'image',
			}
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			this.getinfo();
		},
		methods: {
			uploadfun() {
				this.$refs.upload.chooseFile()
			},
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				console.log(event)
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: ''
					}))
					fileListLen++
				}
				this.submit();
			},
			submit() {
				this.urls = 'user/customer/avatar'
				this.filetype = 'file'
				this.fileList1
				let arr = []
				for (var i = 0; i < this.fileList1.length; i++) {
					let emenelt = this.fileList1[i]
					arr.push({
						name: 'file',
						uri: emenelt.thumb
					})
				}
				let a = uni.uploadFile({
					url: uni.baseURL + this.urls, //仅为示例，非真实的接口地址
					files: arr,
					header: {
						"token": this.token
					},
					name: 'file',
					success: (uploadFileRes) => {
						uni.showToast({
							title: '头像修改成功!',
							icon: '',
							duration: 1000
						});
						this.getinfo();
					}
				});

			},
			editname() {
				if (this.yuan == this.name) {
					uni.reLaunch({
						url: "./mine"
					})
				} else {
					let data = {
						name: this.name
					}
					editname(data).then(res => {
						if (res.success == 1) {
							uni.showToast({
								icon: 'none',
								title: '修改成功!'
							})
							setTimeout(() => {
								uni.reLaunch({
									url: "./mine"
								})
							}, 1000)
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
				}
			},
			getinfo() {
				getinfo().then(res => {
						if (res.success == 1) {
							this.mine = res.data;
							this.name = res.data.name;
							this.id = res.data.id;
							this.srcs = res.data.imageUrl;
							this.yuan = res.data.name;
						} else {
							uni.showToast({
								icon: 'none',
								title: res.message
							})
						}
					})
					.catch(err => {

					});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: rgb(229, 231, 233);
		height: 100vh;
	}

	.cell {
		position: relative;
		background-color: rgb(255, 255, 255);
		width: 100%;
		height: 180rpx;
	}

	.cell::before {
		content: '';
		position: absolute;
		top: auto;
		bottom: 0;
		margin: 0 auto;
		right: 0;
		left: 0;
		height: 4rpx;
		width: 90%;
		background-color: #e5e7e9;
	}

	.cell2 {
		position: relative;
		background-color: rgb(255, 255, 255);
		width: 100%;
		height: 140rpx;
	}

	.cell2::before {
		content: '';
		position: absolute;
		top: auto;
		bottom: 0;
		margin: 0 auto;
		right: 0;
		left: 0;
		height: 4rpx;
		width: 90%;
		background-color: #e5e7e9;
	}

	.lefttext {
		position: absolute;
		width: 20%;
		height: 180rpx;
		text-align: center;
		line-height: 180rpx;
		font-weight: 550;
	}

	.lefttext2 {
		position: absolute;
		width: 20%;
		height: 140rpx;
		text-align: center;
		line-height: 140rpx;
		font-weight: 550;
	}

	.upload {
		position: absolute;
		height: 180rpx;
		line-height: 180rpx;
		right: 40rpx;
	}

	.rightimg {
		position: absolute;
		width: 30%;
		height: 180rpx;
		right: 50rpx;
		// background-color: #1467FF;
	}

	.img {
		position: absolute;
		margin: 0 auto;
		left: 0;
		right: 0;
		top: 20rpx;
		width: 140rpx;
		height: 140rpx;
		border-radius: 20rpx;
	}

	.right {
		position: absolute;
		width: 75%;
		height: 180rpx;
		right: 0;
	}

	.right2 {
		position: absolute;
		width: 75%;
		height: 140rpx;
		right: 0;
	}

	.inp {
		position: absolute;
		width: 90%;
		height: 140rpx;
		line-height: 140rpx;
		margin: 0 auto;
		left: 0;
		right: 40rpx;

	}

	.btn {
		position: relative;
		top: 400rpx;
		width: 80%;
		border-radius: 20rpx;
		background-color: #FFBE53;
		border: 1rpx solid #FFBE53;
	}
</style>
